import {HtmlResize} from "@logicflow/extension";
import {App, createApp, h, ref} from "vue";
import VueNode from "./LoopHtml.vue"

class LoopHtmlNode extends HtmlResize.model {
}

class LoopHtmlView extends HtmlResize.view {
    app: App<Element>;

    constructor(props: any) {
        super(props);
        const appRef = ref(null);
        this.app = createApp({
            render: () => h(VueNode, {ref: appRef}),
            mounted: () => {
                //@ts-ignore
                appRef.value?.setProperties(props.model.getProperties());
            }
        });
    }

    setHtml(rootEl: HTMLElement) {
        //防止多次挂载
        if (this.app) {
            const node = document.createElement("div");
            node.style.height = "100%";
            node.style.width = "100%";
            rootEl.appendChild(node);
            this.app.mount(node);
            this.app = undefined;
        }
    }
}


export default {
    type: "LOOP",
    view: LoopHtmlView,
    model: LoopHtmlNode
};